<template>
    <div class="todayList">
        <small-header :title="title" :type="type" :v="flag"></small-header>
        <ul>
            <li v-for="(item,index) in songlist" :key="index">
                <router-link :to="'/musicDetail?songId='+item.song_id">
                    <img :src="item.pic_big">
                    <p>{{item.title}}</p>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    // import axios from "axios";
    import smallHeader from "./smallHeader.vue";
    import {getSongList} from "../api/api";

    export default {
        name: "todayList",
        data(){
            return {
                songlist:[],

            }
        },
        props:["title","type","size","flag"],
        created() {
            // this.$axios.get("/ltw/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+this.type+"&size="+this.size+"").then(res=>{
            //     this.songlist = res.data.song_list;
            // })
            getSongList(this.type,this.size).then(res=>{
                this.songlist = res.song_list;
            })
        },
        components:{
            smallHeader
        }

    }
</script>

<style lang="less" scoped>
.todayList{
    margin-bottom: 10px;
    background-color: white;
    ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        li{
            width: calc(100% / 3);
            text-align: center;
            img{
                width: 80%;

            }
            p{
                width: 80%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                /*text-align: center;*/
                font-size: 14px;
                margin-left: 10%;
            }

        }
    }

}
</style>